<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
 
    <link rel='stylesheet' href='css/style.css'>
    <link rel='stylesheet' href='css/swiper.min.css'>  
	  
    <script src="js/jquery.1.11.1.js"></script>
    <script src="js/swiper.min.js"></script>  
    <script src="js/idangerous.swiper.min.js"></script>
    <link rel="stylesheet" href="css/topic.css">
	
    <title>专题详情</title>


    <style type="text/css">
        .video_area {
            text-align: center;
            background-color: #333;
        }
        .video_area video {
            width: 90%;
        }
        .video_desc {
            background-color: white;
            margin-top: 10px;
            padding: 10px;
        }

        .audio_area {
            text-align: center;
            background-color: #333;
            padding-top: 20px;
            padding-bottom: 11px;
        }
        .audio_area video {
            width: 90%;
        }
        .audio_desc {
            background-color: white;
            margin-top: 10px;
            padding: 10px;
        }


        html,body {
            margin: 0;
            padding: 0;
            background-color: #ebebeb;
            width: 100%;
            height: 100%;
            position: relative;
        }
        .topic_summary {
            background-color: white;
            height: 60px;
            position: relative;
            padding-bottom: 10px;
        }
        .topic_title {
            position: absolute;
            top: 10px;
            left: 10px;
            text-align: center;
        }

        .topic_price {
            color: red;
            font-weight: bold;
            position: absolute;
            right: 10px;
            top: 10px;
            text-align: center;
            font-size: 16px;
        }

        .topic_label_list {
            position: absolute;
            left: 10px;
            left: 10px;
            top: 35px;
            bottom: 10px;
        }
        .topic_label {
            display: inline;
            border-radius: 5px;
            height: 15px;
            line-height: 15px;
            padding: 2px;
            color: cornflowerblue;
            font-size: 12px;
            text-align: center;
            border: 1px solid cornflowerblue;
        }

        .topic_intro {
            background-color: white;
            padding: 10px;
            margin-top: 10px;
        }
        .separate_line {
            height: 1px;
            /*width: 100%;*/
            margin-top: 9px;
            background-color: #f0f0f7;
        }
        .topic_desc {
            padding-top: 10px;
            font-size: 14px;
        }

        .topic_footer {
            position: absolute;
            bottom: 0;
            width:100%;
            z-index: 1000;
            height: 8%;
            max-height: 60px;
            text-align: center;
            line-height: 60px;
            color: white;
            font-size: 16px;
            background-color: #fd3d3d;
            cursor: pointer;
        }

        .topic_wrap {
            width: 100%;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
        .topic_images {
            max-height: 250px;
            overflow: hidden;
        }
        .topic_images img {
            width: 100%;
            height: 100%;
        }

        .topic_intro_wrapper {
            max-height: 86%;
            margin-top: -12px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
        .topic_header {
            min-height: 50px;
            height: 8%;
        }

        .topic_detail_desc {
            background-color: white;
            padding: 10px;
        }



        .p_card {
            background-color: white;
            margin-bottom: 20px;
            border-radius: 6px;
        }

        .clear {
            clear: both;
        }

        .p_up_card_header {
            /*border: 1px solid red;*/

        }

        .header_name {

            margin: 15px 0px 15px 15px;
            display: inline-block;
        }

        .header_img {
            width: 68px;
            height: 68px;
            display: inline-block;
        }
        .header_text {
            display: inline-block;
            position: relative;
            bottom: 20px;
            margin-left: 5px;
        }

        .header_nickname {
            font-size: 18px;
        }

        .header_invite {
            font-size: 16px;
            color: #999999;
            opacity: 0.8;
        }

        .heaer_qrcode {
            float: right;
            height: 100px;
            width: 100px;
            margin-right: 15px;
            margin-top: 15px;
            margin-bottom: 10px;
        }

        .card_separate {
            height: 1px;
            background-color: #cccccc;
        }
        .personal_card {
            padding-left: 15px;
            margin-top: 15px;
            padding-bottom: 20px;
            color: #999999;
            opacity: 0.8;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <!-- header -->
    <header class="favor-header-bar topic_header">
        <ul class="tabs">
            <li class="default"><a href="javascript:void(0);" id="btn1" hidefocus="true">介绍</a></li>
            <li><a href="javascript:void(0);" id="btn3" hidefocus="true">音频</a></li>
            <li><a href="javascript:void(0);" id="btn2" hidefocus="true">视频</a></li>
            <li><a href="javascript:void(0);" id="btn4" hidefocus="true">图文</a></li>
        </ul>
    </header>
   <!-- slideTo tab -->
    <div class="topic_intro_wrapper">
        <div class="swiper-container favor-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="topic_wrap">
                        <div class="topic_images">
                            <img src="images/36.jpg">
                        </div>
                        <div class="topic_summary">
                            <div class="topic_title">电商规划</div>
                            <div class="topic_price">￥10</div>
                            <div class="topic_label_list">
                                <div class="topic_label">社群</div>
                                <div class="topic_label">社交</div>
                                <div class="topic_label">娱乐</div>
                            </div>

                        </div>
                        <div class="topic_intro">
                            <p style="color:#908b8b">专题介绍</p>
                            <div class="separate_line"></div>
                            <div class="topic_desc">
                                所谓专题，是指针对某个特定对象而特别收集制作而成的一种集中作品，
                                这个对象可以是具体的某个人物或者某个事物，也可以是某个抽象的范围或者领域。
                                在网络上这种作品一般表现为游戏专题或者新闻专题，其中的新闻专题又包括人物专题和新闻热点专题等。
                                所谓专题，是指针对某个特定对象而特别收集制作而成的一种集中作品，
                                这个对象可以是具体的某个人物或者某个事物，也可以是某个抽象的范围或者领域。
                                在网络上这种作品一般表现为游戏专题或者新闻专题，其中的新闻专题又包括人物专题和新闻热点专题等。
                                所谓专题，是指针对某个特定对象而特别收集制作而成的一种集中作品，
                                这个对象可以是具体的某个人物或者某个事物，也可以是某个抽象的范围或者领域。
                                在网络上这种作品一般表现为游戏专题或者新闻专题，其中的新闻专题又包括人物专题和新闻热点专题等。
                                所谓专题，是指针对某个特定对象而特别收集制作而成的一种集中作品，
                                这个对象可以是具体的某个人物或者某个事物，也可以是某个抽象的范围或者领域。
                                在网络上这种作品一般表现为游戏专题或者新闻专题，其中的新闻专题又包括人物专题和新闻热点专题等。
                            </div>
                        </div>
                        <div style="padding: 10px;">
                            <div class="p_card">
                                <div class="p_up_card_header">
                                    <div class="header_name">
                                        <div class="header_img">
                                            <img src="images/header_img.png">
                                        </div>
                                        <div class="header_text">
                                            <div class="header_nickname">易群通</div>
                                            <div class="header_invite">邀请您加入谱创会</div>
                                        </div>
                                    </div>
                                    <div class="header_qrcode">
                                        <img src="images/qrcode.png">
                                    </div>
                                    <div class="clear"></div>

                                </div>
                                <div style="padding-right: 15px;padding-left: 15px;">
                                    <div class="card_separate"></div>
                                </div>
                                <div class="personal_card">个人名片</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="topic_wrap">
                        <div class="audio_area">
                            <audio src="media/audio.mp3" controls="controls">
                                您的浏览器暂时不支持音频播放
                            </audio>
                        </div>
                        <div class="audio_desc">
                            <img src="images/38.jpg" />
                            <p>这是图文信息</p>
                            <p>这是图文信息</p>
                            <img src="images/37.jpg" />
                            <p>这是图文信息</p>
                            <p>这是图文信息</p>
                            <img src="images/36.jpg" />
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="topic_wrap">
                        <div class="video_area">
                            <video src="media/adv.mp4"  width="320" height="240" controls="controls">
                                您的浏览器暂时不支持视频播放
                            </video>
                        </div>
                        <div class="video_desc">
                            <img src="images/38.jpg" />
                            <p>这是图文信息</p>
                            <p>这是图文信息</p>
                            <img src="images/37.jpg" />
                            <p>这是图文信息</p>
                            <p>这是图文信息</p>
                            <img src="images/36.jpg" />
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="topic_wrap">
                        <div class="topic_detail_desc">
                            <p>此处是图文信息，将Html放在此即可</p>
                            <p>此处是图文信息，将Html放在此即可</p>
                            <img src="images/37.jpg" />
                            <p>此处是图文信息，将Html放在此即可</p>
                            <p>此处是图文信息，将Html放在此即可</p>
                            <img src="images/38.jpg" />
                            <p>此处是图文信息，将Html放在此即可</p>
                            <p>此处是图文信息，将Html放在此即可</p>
                            <p>此处是图文信息，将Html放在此即可</p>
                            <img src="images/36.jpg" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="topic_footer">购买</div>

   <script>
       var height = $(".swiper-wrapper").find(".topic_wrap:eq(0)").height();
       $(".swiper-wrapper").height(height);

        var mySwiper = new Swiper('.swiper-container',{
            autoHeight: true,
            onSlideChangeStart: function(){
              $(".tabs .default").removeClass('default');
              $(".tabs li").eq(mySwiper.activeIndex).addClass('default');
            }
        });

         $(".tabs li").on('click',function(e){
            e.preventDefault();
            e.stopPropagation();
            $(".tabs .default").removeClass('default');
            $(this).addClass('default');
            var index = $(this).index();
            mySwiper.swipeTo(index);
            var height = $(".swiper-wrapper").find(".topic_wrap:eq("+index+")").height();
            $(".swiper-wrapper").height(height);
            $(".topic_intro_wrapper").scrollTop(0);
          });
    </script>
</body>
</html>

